<template>
  <div class="right-out">
    <!-- 头像 -->
    <div class="nav" >{{ title }}</div>
    <div class="content">
      <div class="userInfo">
        <div class="avatar" >
          <img :src="userInfo.picUrl" :style="{borderRadius:'50%'}" alt="" />
        </div>
        <div class="info">
          <p>{{ userInfo.userName }}</p>
          <p>您还不是会员</p>
        </div>
      </div>
      <div class="preferential">开通会员平均每年可省：￥9500</div>
      <div class="vip-out">
        <div
          class="vip"
          v-for="(vip, index) in vipInfo"
          :key="index"
          :class="{ active: index === isIndex }"
          @click="changeVipLevel(index, vip.data.price)"
        >
          <div class="vip-title">{{ vip.data.title }}</div>
          <div class="vip-price">
            ￥<span>{{ vip.data.price }}</span
            >/季
          </div>
          <div class="vip-titlePrice">
            合计<span>￥{{ vip.data.total_price }}</span>
            <span v-show="index === 0"> (青少年专属)</span>
            <span v-show="index === 2"> (省￥{{ vip.data.saving }})</span>
          </div>
        </div>
        <span class="recommend">推荐</span>
      </div>
      <div class="open">立即以{{ price }}元开通</div>
      <div class="agreement">
        开通即视为同意
        <a href="https://www.dance365.com/vip-agreement" target="_blank"
          >《会员服务协议》</a
        >
      </div>
      <div class="equity">
        <p class="equity-title">会员权益</p>
        <ul class="equity-list">
          <li
            class="equity-item"
            v-for="(vip, index) in vipEquity"
            :key="index"
          >
            <i>
              <img :src="vip.src" alt="" />
            </i>
            <p>{{ vip.text }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Resource",
};
</script>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
// 引入请求
import { getUserInfoRequest, getVipPayInfoRequest } from "@/api/center";


const userInfo = ref({
  userName: "",
  picUrl: "",
});

const vipEquity = ref([
  {
    src: "https://rs.dance365.com/teach_video_free.png",
    text: "719个会员专区课程免费学习",
  },
  {
    src: "	https://rs.dance365.com/member_preferential.png",
    text: "非会员专区课程可获取会员立减优惠",
  },
  {
    src: "https://rs.dance365.com/member_screen@2x.png",
    text: "同屏对比功能",
  },
  {
    src: "	https://rs.dance365.com/update_music@3x.png",
    text: "音频提取功能",
  },
  {
    src: "	https://rs.dance365.com/music_clip@3x.png",
    text: "音频剪辑功能",
  },
  {
    src: "https://rs.dance365.com/member_icon_beat.png",
    text: "节拍口令功能",
  },
  {
    src: "	https://rs.dance365.com/member_photo_download1@3x.png",
    text: "保存视频到本地相册",
  },
  {
    src: "	https://rs.dance365.com/lv_ad@3x.png",
    text: "免广告特权",
  },
  {
    src: "	https://rs.dance365.com/lv_accelerate.png",
    text: "成长等级加速特权",
  },
  {
    src: "https://rs.dance365.com/course_equity.png",
    text: "会员学习成长 优先帮扶",
  },
  {
    src: "	https://rs.dance365.com/member_logo.png",
    text: "会员专享身份标识",
  },
  {
    src: "	https://rs.dance365.com/update_equity.png",
    text: "享受新增权益和功能",
  },
]);

const vipInfo = ref<any>([]);
const isIndex = ref(2);
const price = ref();

onMounted(() => {
  getUserInfo();
  getVipPayInfo();
});
// 获取用户信息
const getUserInfo = async () => {
  const re = await getUserInfoRequest();
  // console.log(re, "用户信息");
  userInfo.value.userName = re.account;
  userInfo.value.picUrl = re.avatar;
};
// 获取VIP充值信息
const getVipPayInfo = async () => {
  const re = await getVipPayInfoRequest();
  console.log(re, "VIP信息");
  vipInfo.value = re;
  re.forEach((item: any) => {
    price.value = item.data.price;
  });
};

const route = useRoute();

const title = route.meta.title;

// 切换vip等级
const changeVipLevel = (index: number, vipPrice: number) => {
  isIndex.value = index;
  price.value = vipPrice;
};
</script>

<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    padding: 28px 30px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .content {
    width: 1020px;
    min-height: 700px;
    background-color: white;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 30px;
    .userInfo {
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar {
        width: 100px;
        height: 100px;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .info {
        margin-left: 21px;
        p:nth-child(1) {
          font-size: 20px;
          margin-bottom: 14px;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #f93684;
        }
      }
    }
    .preferential {
      margin: 19px 0 21px;
      font-size: 16px;
      text-align: center;
    }
    .vip-out {
      display: flex;
      justify-content: center;
      .vip {
        width: 220px;
        height: 124px;
        border: 1px solid #b1b5c1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-radius: 8px;
        text-align: center;
        font-size: 16px;
        ~ .vip {
          margin-left: 30px;
        }
        .vip-price {
          span {
            font-size: 30px;
          }
        }
      }
      .recommend {
        width: 75px;
        height: 35px;
        color: white;
        background-color: #ff4683;
        border: 2px solid white;
        font-size: 14px;
        border-radius: 20px;
        text-align: center;
        line-height: 35px;
        position: relative;
        left: -58px;
        top: -15px;
      }
      .active {
        color: #f93684;
        border: 2px solid #f93684;
        background-color: #f9ebf1;
      }
    }
    .open {
      width: 330px;
      height: 56px;
      font-size: 16px;
      margin: 30px auto 12px;
      color: white;
      background-color: #ff638f;
      border-radius: 10px;
      text-align: center;
      line-height: 56px;
    }
    .agreement {
      font-size: 14px;
      text-align: center;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 37px;
      a {
        color: #f93694;
        text-decoration: none;
      }
    }
    .equity {
      width: 960px;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 15px;
      .equity-title {
        font-size: 20px;
        font-weight: 700;
        margin: 32px 0 20px;
      }
      .equity-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .equity-item {
          width: 129px;
          height: 129px;
          border: 1px solid #e3e3e3;
          text-align: center;
          flex-shrink:0;
          margin: 0 30px 30px 0;
          border-radius: 8px;
          &:nth-child(6),&:nth-child(12){
            margin: 0 0 30px 0;
          }
          i {
            padding: 14px 0;
            width: 46px;
            height: 42px;
            display: inline-block;   
            img {
              width: 46px;
              height: 42px;
            }
          }
          p{
            font-size: 14px;
            padding: 0 6px;
          }
        }
      }
    }
  }
}
</style>
